class Enlarge
{
    constructor(el)
    {
        this.el = document.querySelector(el)
        this.imgobj = this.el.querySelector(".img")
        this.maskobj = this.el.querySelector(".mask")
        this.enlargeobj = this.el.querySelector(".enlarge")
        this.wproportion = null
        this.hproportion = null
        this.init()
    }

    init(){
        this.overout()
        this.enlargewh()
        this.maskmove()
        this.imgclick()
    }

    imgclick(){
        let imgclick1 = this.el.querySelector("ul li:nth-of-type(1)")
        imgclick1.onclick = ()=>{
            this.el.querySelector("ul li:nth-of-type(2)").className = ""
            this.el.querySelector("ul li:nth-of-type(1)").className = "active"
            this.imgobj.style.background = `url(./imgs/1.jpg) no-repeat`
            this.enlargeobj.style.background = `url(./imgs/1.big.jpg) no-repeat`
        }
        let imgclick2 = this.el.querySelector("ul li:nth-of-type(2)")
        imgclick2.onclick = ()=>{
            this.el.querySelector("ul li:nth-of-type(1)").className = ""
            this.el.querySelector("ul li:nth-of-type(2)").className = "active"
            this.imgobj.style.background = `url(./imgs/2.jpg) no-repeat`
            this.enlargeobj.style.background = `url(./imgs/2.big.jpg) no-repeat`
        }
    }

    enlargedistance(left,top){
        let x = left * this.wproportion
        let y = top * this.hproportion
        this.enlargeobj.style.backgroundPosition = `-${x}px -${y}px`
    }
   
    maskmove(){
        this.imgobj.onmousemove = (evt)=>{
            let e = evt || window.event
            let left = e.pageX - this.maskobj.offsetWidth/2 - this.imgobj.parentNode.offsetLeft
            let top = e.pageY - this.maskobj.offsetHeight/2 - this.imgobj.parentNode.offsetTop
            let maxleft = this.imgobj.offsetWidth - this.maskobj.offsetWidth
            let maxtop = this.imgobj.offsetHeight - this.maskobj.offsetHeight
            if(left < 0) left = 0
            if(top < 0)  top = 0
            if(left > maxleft) left = maxleft
            if(top > maxtop)  top = maxtop
            this.maskobj.style.left = left + "px"
            this.maskobj.style.top = top + "px"
            this.enlargedistance(left,top)
        }
    }

    getstyle(styledata,stylename){
        if(window.getComputedStyle)
        {
            return window.getComputedStyle(styledata)[stylename]
        }
        else
        {
            return styledata.currentStyle[stylename]
        }
    }

    enlargewh(){
        let maskwidth = parseInt(this.getstyle(this.maskobj,"width"))
        let maskheight = parseInt(this.getstyle(this.maskobj,"height"))
        let enlargeWH = this.getstyle(this.enlargeobj,"background-size")
        this.wproportion = parseInt(enlargeWH.split(" ")[0])/this.imgobj.clientWidth
        this.hproportion = parseInt(enlargeWH.split(" ")[1])/this.imgobj.clientHeight
        this.enlargeobj.style.width = maskwidth * this.wproportion + "px"
        this.enlargeobj.style.height = maskheight * this.hproportion + "px"
    }

    overout(){
        this.imgobj.onmouseover = ()=> {
            this.maskobj.style.display = "block"
            this.enlargeobj.style.display = "block"
        }
        this.imgobj.onmouseout = ()=> {
            this.maskobj.style.display = "none"
            this.enlargeobj.style.display = "none"
        }   
    }
}



